<template>
  <el-container id="screen-container" class="client" :style="styleHeight">
    <el-header class="header">
      <el-row>
        <div style="font-size: 2em; font-weight: bold; margin-top: .2em;">智能监测大屏监控</div>
      </el-row>
      <el-row v-if="isFullScreen" style="text-align:right">
        <el-button class="exit-btn" @click="fullScreen"></el-button>
      </el-row>
      <el-row v-else style="text-align:right">
        <el-button class="full-btn" @click="fullScreen"></el-button>
      </el-row>
    </el-header>
    <el-main v-if="!isFullScreen">
      <el-row>
        <el-col :span="6">
          <el-row>
            <factor-alarm :is-full-screen="isFullScreen"></factor-alarm>
          </el-row>
          <el-row style="height: .5em"></el-row>
          <el-row>
            <device-alarm :is-full-screen="isFullScreen"></device-alarm>
          </el-row>
          <el-row style="height: .5em"></el-row>
          <el-row>
            <condition :is-full-screen="isFullScreen"></condition>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <lfd-map :is-full-screen="isFullScreen"></lfd-map>
          </el-row>
          <el-row style="height: .5em"></el-row>
          <el-row>
            <real-time :is-full-screen="isFullScreen"></real-time>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <comprehensive :is-full-screen="isFullScreen"></comprehensive>
          </el-row>
          <el-row style="height: .5em"></el-row>
          <el-row>
            <value-gauge :is-full-screen="isFullScreen"></value-gauge>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
    <el-main v-else>
      <el-row>
        <el-col :span="6">
          <el-row>
            <factor-alarm :is-full-screen="isFullScreen"></factor-alarm>
          </el-row>
          <el-row style="height: .5em"></el-row>
          <el-row>
            <device-alarm :is-full-screen="isFullScreen"></device-alarm>
          </el-row>
          <el-row style="height: .5em"></el-row>
          <el-row>
            <condition :is-full-screen="isFullScreen"></condition>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <lfd-map :is-full-screen="isFullScreen"></lfd-map>
          </el-row>
          <el-row style="height: .5em"></el-row>
          <el-row>
            <real-time :is-full-screen="isFullScreen"></real-time>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <comprehensive :is-full-screen="isFullScreen"></comprehensive>
          </el-row>
          <el-row style="height: .5em"></el-row>
          <el-row>
            <value-gauge :is-full-screen="isFullScreen"></value-gauge>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
    import LfdMap from "../components/LfdMap";
    import FactorAlarm from "../components/FactorAlarm";
    import DeviceAlarm from "../components/DeviceAlarm";
    import RealTime from "../components/RealTime";
    import Condition from "../components/Condition";
    import Comprehensive from "../components/Comprehensive";
    import ValueGauge from "../components/ValueGauge";
    import Gauge from "../components/LastestValue/Gauge";

    export default {
        name: 'BigScreen',
        components: {
            LfdMap,
            FactorAlarm,
            DeviceAlarm,
            RealTime,
            Condition,
            Comprehensive,
            ValueGauge,
            Gauge
        },
        methods: {
            requestFullScreen(element) {
                let requestMethod = element.requestFullScreen
                    || element.webkitRequestFullScreen
                    || element.mozRequestFullScreen
                    || element.msRequestFullScreen;
                if (requestMethod) {
                    requestMethod.call(element);
                } else if (typeof window.ActiveXObject !== "undefined") {
                    let wscript = new ActiveXObject("WScript.Shell");
                    if (wscript !== null) {
                        wscript.SendKeys("{F11}");
                    }
                }
            },

            exitFullscreen() {
                let de = window.parent.document;

                if (de.exitFullscreen) {
                    de.exitFullscreen();
                } else if (de.mozCancelFullScreen) {
                    de.mozCancelFullScreen();
                } else if (de.webkitCancelFullScreen) {
                    de.webkitCancelFullScreen();
                } else if (de.msExitFullscreen) {
                    de.msExitFullscreen()
                }

            },

            fullScreen() {
                if (this.isFullScreen) {
                    this.exitFullscreen();
                } else {
                    this.requestFullScreen(document.getElementById('screen-container'));
                }
                this.isFullScreen = !this.isFullScreen;
            }
        },
        mounted() {
            // const that = this;
            // window.onresize = () => {
            //     that.styleHeight = "height: " + (document.documentElement.clientHeight) + "px";
            // };
        },
        data() {
            return {
                styleHeight: "",
                isFullScreen: false
            }
        },
        watch:{
          isFullScreen(){
              if (this.isFullScreen){
                  this.styleHeight = "height: " + (document.documentElement.clientHeight) + "px";
              }
          }
        },
        created() {

        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

  .client {
    /*background: url(../../static/image/header.png) no-repeat left top;*/
    /*background-size: 100%;*/
    /*height: 100%;*/
  }

  .full-btn {
    background-color: transparent;
    background-image: url(../../static/image/fullscreen.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 1.5em 1.5em;
    margin-right: .5em;
    border-width: 0;
  }

  .exit-btn {
    background-color: transparent;
    /*background-image: url(../../static/image/exit.png);*/
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 1.5em 1.5em;
    margin-right: .5em;
    border-width: 0;

  }

  /*  .el-row {*/
  /*    margin-bottom: 20px;*/

  /*    &:last-child {*/
  /*      margin-bottom: 0;*/
  /*    }*/
  /*  }*/

  /*  .el-col {*/
  /*    border-radius: 4px;*/
  /*  }*/

  /*  .bg-purple-dark {*/
  /*    background: #99a9bf;*/
  /*  }*/

  /*  .bg-purple {*/
  /*    background: #d3dce6;*/
  /*  }*/

  /*  .bg-purple-light {*/
  /*    background: #e5e9f2;*/
  /*  }*/

  /*  .grid-content {*/
  /*    border-radius: 4px;*/
  /*    min-height: 36px;*/
  /*  }*/

  /*  .row-bg {*/
  /*    padding: 10px 0;*/
  /*    background-color: #f9fafc;*/
  /*  }*/
</style>
